<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script type="text/javascript">
    // 用setInterval实现，每个属性都要一个定时器，不现实
    // let data = {
    //     name: '尚硅谷',
    //     address: '北京'
    // }
    // let tmp='尚硅谷'
    // setInterval(()=>{
    //     if(data.name!=tmp)
    //     {
    //         tmp=data.name
    //         console.log('name被改了');
    //     }
    // },100)

    // 有问题，不能读，不能写 死循环
    // Object.defineProperty(data,'name',{
    //     get(){
    //         return data.name
    //     },
    //     set(val){
    //         data.name=val
    //     }
    // })

    // 大概写法
    // 创建数据
    let data = {
        name: '尚硅谷',
        address: '北京',
        a:{
            x:1
        }
    }
    // 先建一个观察者对象,用于监视data中属性变化
    const obs = new Observer(data)
    // 准备一个vm实例对象 data有两步操作 1.加工data(加工就是添加get、set方法) 2.vm._data=data
    let vm ={}
    vm._data=data=obs
    // 观察者对象的构造函数
    function Observer(obj) {
        // 汇总对象中所有属性形成一个数组
        const keys = Object.keys(obj)
        // 遍历
        keys.forEach(k => {
            Object.defineProperty(this, k, {
                get() {
                    // console.log(typeof k);
                    // console.log(obj.k);
                    return obj[k]
                },
                set(val) {
                    obj[k] = val
                    console.log('name改变了，需要解析模板，生成新的虚拟DOM，新旧DOM对比，转成真实DOM');
                }
            })
        });
    }
</script>

</html>